<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title></title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: black;
            margin: 0 auto;
        }

        p {
            color: white;
            text-align: center;
            line-height: 20px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 20px;
            background-color: #fff;
            margin: 10px;
            color: black;
        }

        button {
            display: block;
            width: 250px;
            height: 50px;
            background-color: blue;
            color: white;
            margin: auto;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p><span class="">00</span>分钟<span>00</span>秒</p>
        <button>开始</button>
    </div>
    <script>
        var num = prompt('请输入秒数：');
        var spans = document.querySelectorAll('span');
        var button = document.querySelector('button');
        console.log(button);
        var minute = Math.floor(num / 60);
        var second = num % 60;
        if (minute < 10) {
            minute = '0' + minute;
        } else {
            minute = minute;
        }
        if (second < 10) {
            second = '0' + second;
        } else {
            second = second;
        }
        spans[0].innerHTML = minute;
        spans[1].innerHTML = second;

        // var begin = false;
        // 


        // function btnClick() {
        //     if (begin) {
        //         clearInterval(timer);
        //         button.innerHTML = "开始";
        //         begin = false;
        //     } else {
        //         timer = setInterval(jiShu, 1000);
        //         button.innerHTML  = "暂停";
        //         begin = true;
        //     }
        // }
        var timer;
        button.onclick = function (ev) {
            if (button.innerHTML == "开始") {
                timer = setInterval(jiShu, 1000);
                button.innerHTML = "暂停";
            } else {
                clearInterval(jiShu);
                button.innerHTML = "开始";
            }
        }

        function jiShu() {
            num--;
            var minute = Math.floor(num / 60);
            var second = num % 60;
            if (minute < 10) {
                minute = '0' + minute;
            } else {
                minute = minute;
            }
            if (second < 10) {
                second = '0' + second;
            } else {
                second = second;
            }
            spans[0].innerHTML = minute;
            spans[1].innerHTML = second;
            if (num == 0) {
                clearInterval(timer);
                button.innerHTML = "请重新输入";
                alert("计时结束")
            }
        }
    </script>
</body>

</html>